import React, { Component } from 'react';
import {observer} from 'mobx-react'
import todoStore from './appStore'

const App = (props) => {
  return (
    <div>
      <h1> 任务列表 </h1>
      { todoStore.todos.map((item, index) => (
            <Todo key={index} todo={item} idx={index} />
        )
      )}
      <h3> 任务状态: { todoStore.report } </h3>
      <h3> 已完成任务数: { todoStore.completedTodosCount } </h3>
      <h2> 添加任务 </h2>
      任务内容: <input type="text" ref={(input) => this.task = input} />
      负责人: <input type="text" ref={(input) => this.assignee = input} />
      <button onClick={() =>
        todoStore.addTodo(this.task.value, this.assignee.value)}>
          添加
      </button>
    </div>
  );
}

const todo = (props) => {
  let todo = props.todo
  return (
    <div>
      任务内容:
      <input type="text" value={todo.task}
        onChange={(e) => todoStore.setTodoTask(props.idx, e.target.value)}
      /> || 是否完成: {todo.completed ? '完成' : '待办'} || 负责人: {todo.assignee}

      <input type='checkbox'
        checked={todo.completed}
        onChange={()=>todoStore.setComplete(props.idx)} />

      计算字段测试:
      {`${todo.task} ${todo.completed}`}
    </div>
  )
}
// 注意必须用observer包裹
const Todo = observer(todo)

export default observer(App);
